<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    * {stroke:red}
    </style>
    <script>
    window.onload=function (){
      let oL1=document.getElementById('l1');

      /*oL1.onmouseover=function (){
        this.style.stroke='green';
      };
      oL1.onmouseout=function (){
        this.style.stroke='red';
      };*/

      /*oL1.addEventListener('mouseover', function (){
        this.style.stroke='green';
      }, false);
      oL1.addEventListener('mouseout', function (){
        this.style.stroke='red';
      }, false);*/

      document.body.onmouseover=function (ev){
        if(ev.srcElement==oL1){
          ev.srcElement.style.stroke='green';
        }
      };
      document.body.onmouseout=function (ev){
        if(ev.srcElement==oL1){
          ev.srcElement.style.stroke='red';
        }
      };
    };
    </script>
  </head>
  <body>
    <svg width="800" height="600">
      <line x1="100" y1="100" x2="300" y2="300" style="stroke:red; stroke-width:20" id="l1"></line>
    </svg>
  </body>
</html>
